<template>
    <div class="root">
        <Topbar>购房计算器</Topbar>
        <!--<div class="top">
            <div class="top-left">房贷计算</div>
            <div class="top-right">税费计算</div>
        </div>-->
        <div class="banner" @click="selected($event)">
            <div class="banner-left" ref="nowhouse">新房税费</div>
            <div class="banner-right" ref="secondhouse">二手房税费</div>
        </div>

        

        <div class="main" v-if="show">
            <div>
                <span>单价：</span>
                <input type="text" placeholder="请输入单价" v-model="unitprice">
                <span>元/㎡</span>
            </div>
            <div>
                <span>面积：</span>
                <input type="text" placeholder="请输入面积" v-model="area">
                <span>㎡</span>
            </div>
            <div @click="aa($event)">
                <span>购房性质：</span>
                <input type="radio" name="gfxz" id="one" class="bor" value="one">
                <label for="one">一套</label>
                <input type="radio" name="gfxz" id="second" class="bor" value="second">
                <label for="second">二套</label>
                <input type="radio" name="gfxz" id="overthird" class="bor" value="third">
                <label for="overthird">三套以上</label>
            </div>
            <div @click="bb($event)">
                <span>房屋类别：</span>
                <input type="radio" name="lb" id="has" class="bor" value="has">
                <label for="has">有电梯</label>
                <input type="radio" name="lb" id="nohas" class="bor" value="nohas">
                <label for="nohas">无电梯</label>
            </div>
            <button class="btn" @click="startjisuan">开始计算</button>
        </div>

        <div v-else class="main">
            <div>
                <span>单价：</span>
                <input type="text" placeholder="请输入单价" v-model="unitprice">
                <span>元/㎡</span>
            </div>
            <div>
                <span>面积：</span>
                <input type="text" placeholder="请输入面积" v-model="area">
                <span>㎡</span>
            </div>
            <div @click="aa($event)">
                <span>购房性质：</span>
                <input type="radio" name="xz" id="one" class="bor" value="one">
                <label for="one">一套</label>
                <input type="radio" name="xz" id="second" class="bor" value="second">
                <label for="second">二套</label>
                <input type="radio" name="xz" id="overthird" class="bor" value="third">
                <label for="overthird">三套以上</label>
            </div>
            <div @click="cc($event)">
                <span>房屋期限</span>
                <input type="radio" name="qx" value="intwoyear">
                <span>2年内</span>
                <input type="radio" name="qx" value="twotofive">
                <span>2-5年</span>
                <input type="radio"  name="qx" value="overfive">
                <span>5年以上</span>
            </div>
            <button class="btn" @click="secondhouse">开始计算</button>
        </div>

         
         <!--显示计算结果-->
         <transition name="in">
             <div  class="result" v-show="result">
                <div class="result-left">
                    <span class="txt">物业维修基金</span>
                    <br>
                    <span style="font-size:12px;color:white">￥</span>
                    <span class="txt1">{{weixiu}}</span>
                </div>
                <div class="result-right">
                    <span class="txt">契税</span>
                    <br>
                    <span style="font-size:12px;color:white">￥</span>
                    <span class="txt1">{{qieyue}}</span>
                </div>
            </div>
         </transition>

         <!--显示二手房计算结果-->
         <transition name="in">
             <div  class="result1"  v-show="result1">
                <div class="result-left1">
                    <span class="txt">增值税</span>
                    <br>
                    <span style="font-size:12px;color:white">￥</span>
                    <span class="txt1">{{zzs}}</span>
                </div>
                <div class="result-middle">
                    <span class="txt">个税</span>
                    <br>
                    <span style="font-size:12px;color:white">￥</span>
                    <span class="txt1">{{gs}}</span>
                </div>
                <div class="result-right1">
                    <span class="txt">契税</span>
                    <br>
                    <span style="font-size:12px;color:white">￥</span>
                    <span class="txt1">{{qieyue}}</span>
                </div>
            </div>
         </transition>
         <transition name="pagein">
            <div class="shaow1" v-show="result1" @click="disvresult1"></div>
         </transition>

         <!--蒙灰层-->
         <transition name="pagein">
            <div class="shaow" v-show="result" @click="disvresult"></div>
         </transition>
    </div>
</template>

<script>
import Topbar from '../components/Topbar.vue'
import Bus from '../utils/Bus.js'
    export default{
        components:{
            Topbar
        },
        data:function(){
            return {
                show:true,
                show1:true,
                unitprice:"",
                area:"",
                total:"",
                weixiu:"",
                qieyue:"",
                result:false,
                result1:false,
                num:"",
                has:"",
                houseclass:"",
                housetime:"",
                housexz:"",
                zzs:"",
                gs:""
            }
        },
        methods:{
            selected:function(e){
                if(e.target.innerHTML=="新房税费"){
                    this.show = true;
                    this.$refs.nowhouse.style="background-color:#FF6900;color:white;border:1px solid #FF6900"
                    this.$refs.secondhouse.style="background-color:white;color:black;border:1px solid #FF6900"
                }
                if(e.target.innerHTML=="二手房税费"){
                    this.show =false;
                    this.$refs.secondhouse.style="background-color:#FF6900;color:white;border:1px solid #FF6900"
                    this.$refs.nowhouse.style="background-color:white;color:black;border:1px solid #FF6900"
                }
            },
            // 新房税费计算
            startjisuan:function(){

                this.result =true;
                this.total = this.unitprice*1*this.area*1;
                // 物业维修基金60%
                if(this.num=="one"&&this.has=="has"){
                    this.weixiu =  this.total*0.6;
                    this.qieyue = this.total*0.015;
                }
                if(this.num=="second"&&this.has=="has"){
                    this.weixiu =  this.total*0.6;
                    this.qieyue = this.total*0.02;
                }
                if(this.num=="third"&&this.has=="has"){
                    this.weixiu =  this.total*0.6;
                    this.qieyue = this.total*0.03;
                }
                if(this.num=="one"&&this.has=="nohas"){
                    this.weixiu =  this.total*0.375;
                    this.qieyue = this.total*0.015;
                }
                if(this.num=="second"&&this.has=="nohas"){
                    this.weixiu =  this.total*0.375;
                    this.qieyue = this.total*0.02;
                }
                if(this.num=="third"&&this.has=="nohas"){
                    this.weixiu =  this.total*0.375;
                    this.qieyue = this.total*0.03;
                }
               
                // console.log(this.total)
            },
            disvresult:function(){
                this.result =false;
             
            },
            disvresult1:function(){
                   this.result1 =false;
            },
            aa:function(e){
                // console.dir(e)
                this.num = e.target.value;
            },
            bb:function(e){
                // console.dir(e)
                this.has = e.target.value;
            },
            cc:function(e){
                // console.dir(e)
                this.housetime = e.target.value;
            },
            // 二手房税费计算
            secondhouse:function(){
                this.result1 =true;
                 this.total = this.unitprice*1*this.area*1;
                 if(this.num=="one"&&this.housetime=="intwoyear"){
                     this.total = this.unitprice*1*this.area*1;
                     this.zzs = (this.total/1.05*0.056).toFixed(1);
                     this.gs = this.total*0.01;
                     this.qieyue =this.total*0.015;
                 }
                 if(this.num=="one"&&this.housetime=="twotofive"){
                     this.total = this.unitprice*1*this.area*1;
                     this.zzs = (this.total/1.05*0.056).toFixed(1);
                     this.gs = this.total*0.01;
                     this.qieyue =this.total*0.015;
                 }
                 if(this.num=="one"&&this.housetime=="overfive"){
                     this.total = this.unitprice*1*this.area*1;
                     this.zzs = "免征税";
                     this.gs = "免个税";
                     this.qieyue =this.total*0.015;
                 }
                 if(this.num=="two"&&this.housetime=="intwoyear"){
                     this.total = this.unitprice*1*this.area*1;
                     this.zzs =(this.total/1.05*0.056).toFixed(1);
                     this.gs = this.total*0.01;
                     this.qieyue =this.total*0.02;
                 }
                 if(this.num=="two"&&this.housetime=="twotofive"){
                     this.total = this.unitprice*1*this.area*1;
                     this.zzs = (this.total/1.05*0.056).toFixed(1);
                     this.gs = this.total*0.01;
                     this.qieyue =this.total*0.02;
                 }
                 if(this.num=="two"&&this.housetime=="overfive"){
                     this.total = this.unitprice*1*this.area*1;
                     this.zzs ="免征税";
                     this.gs = "免个税";
                     this.qieyue =this.total*0.02;
                 }
                 if(this.num=="third"&&this.housetime=="intwoyear"){
                     this.total = this.unitprice*1*this.area*1;
                     this.zzs =(this.total/1.05*0.056).toFixed(1);
                     this.gs = this.total*0.01;
                     this.qieyue =this.total*0.03;
                 }
                 if(this.num=="third"&&this.housetime=="twotofive"){
                     this.total = this.unitprice*1*this.area*1;
                     this.zzs = (this.total/1.05*0.056).toFixed(1);
                     this.gs = this.total*0.01;
                     this.qieyue =this.total*0.03;
                 }
                 if(this.num=="third"&&this.housetime=="overfive"){
                     this.total = this.unitprice*1*this.area*1;
                     this.zzs ="免征税";
                     this.gs = "免个税";
                     this.qieyue =this.total*0.03;
                 }
                  
            }
        }
    }
</script>

<style scoped>
.top{
    /*border: 1px solid black;*/
    height: 44px;
    line-height: 44px;
    display: flex;
    width: 100%;
    text-align: center;
}
.top-left{
    width: 50%;
    border: 1px solid #eeeeee;
}
.top-right{
    width: 50%;
    border: 1px solid #eeeeee;
}
.banner{
    display: flex;
    justify-content: space-around;
    width: 80%;
    margin: 30px auto;
    /*border: 1px solid black;*/
    height: 40px;
    line-height: 40px;
    border-radius: 4px;
    text-align: center;
    /*overflow: hidden;*/
}
.banner-left{
    width: 50%;
    background-color: #FF6900;
    color: white;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.banner-right{
    width: 40%;
    flex-grow: 1;
    border: 1px solid #FF6900;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.btn{
    width: 80%;
    height: 30px;
    background-color: #FF6900;
    color: white;
    border: none;
    border-radius: 4px;
    margin: 20px 30px ;
}
/*.root{
    height: 100vh;
    overflow-y: scroll;
}*/
.main{
    padding: 10px;
}
.main input{
    border: 1px;
}
.main div{
    margin: 10px;
    font-size: 12px;
    text-align: left;
    border-bottom: 1px solid #eeeeee;
    padding: 10px;
}
.result{
    /*border: 1px solid black;*/
    display: flex;
    text-align: center;
    height: 155px;
    background: -webkit-linear-gradient(top,#FF7500,#FF8B00,#FFb000);
    border-radius: 5px;
    width: 90%;
    position: absolute;
    top:190px;
    left:20px;
    padding-top:30px;
    z-index: 10
}
.result-left{
    padding-top:10px;
    border-right: 1px solid rgba(255,255,255,0.6);
    border-top: 1px solid rgba(255,255,255,0.6);
    width: 50%;
}
.result-right{
    padding-top:10px;
    border-top: 1px solid rgba(255,255,255,0.6);
    width: 50%;
}
.txt{
    color: rgba(255,255,255,0.6);
}
.txt1{
    font-size: 20px;
    color: white;
}
.shaow{
    height: 100vh;
    width:100%;
    background-color: rgba(0,0,0,0.6);
    position: absolute;
    top:0;
}
.shaow1{
    height: 100vh;
    width:100%;
    background-color: rgba(0,0,0,0.6);
    position: absolute;
    top:0;
}

.result1{
    /*border: 1px solid black;*/
    display: flex;
    text-align: center;
    height: 155px;
    background: -webkit-linear-gradient(top,#FF7500,#FF8B00,#FFb000);
    border-radius: 5px;
    width: 90%;
    position: absolute;
    top:190px;
    left:20px;
    padding-top:30px;
    z-index: 10
}
.result-left1{
    padding-top:10px;
    border-right: 1px solid rgba(255,255,255,0.6);
    border-top: 1px solid rgba(255,255,255,0.6);
    width: 33.33%;
}
.result-middle{
    padding-top:10px;
    border-top: 1px solid rgba(255,255,255,0.6);
    border-right: 1px solid rgba(255,255,255,0.6);
    width: 33.33%;
}
.result-right1{
    padding-top:10px;
    border-top: 1px solid rgba(255,255,255,0.6);
    width: 33.33%;
}
</style>